import React, { Component } from 'react'
import { Collapse, Button  } from "antd";
import {withRouter} from 'react-router-dom'
import { connect } from 'react-redux';
import axios from 'axios';
import qs from 'qs'
import './index.css'

const { Panel } = Collapse;

// let matrixArr = [];

class CollapseCard extends Component {
  constructor(props) {
    super(props);
    this.state = {  
      matrixArr:[],
      pointFlag: false,
      needType: []
    }
  }
  componentDidMount() {
    let arrNum = 0;
    let array = [];
    for (let i = 1; i < 17; i++) {
      array[i-1] = [];
      for (let j = 1; j < 7; j++) {
        let x = j - 1;
        let y = i - 1;
        if (j == 1) {
            array[i-1].push({
              checked: 'false',
              line: y,
              name: '线'+ i
            })

        }
        array[i-1].push({
          checked:'false',
          point: x+','+y,
          name:j,
        })
      }
    }
    this.setState({
      matrixArr: array
    })
  }
  lineClick(i) {
    // console.log(this.state.matrixArr[i][0]);
    let array = [...this.state.matrixArr];
    let equip = this.props.equip;
    let needType = []
    if (array[i][0].checked == 'false') {
      array[i][0].checked = 'true';
      for (let j = 1; j < array[i].length; j++) {
        array[i][j].checked = 'true';
      }
      for (let k = 0; k <= array.length-1; k++) {
        if (array[k][0].checked == 'true') {
          for (let j = 1; j < array[i].length; j++) {
            if (array[k][j].checked == 'true') {
              needType.push(j+','+array[k][0].line)
            }
          }
        }
      }
      // console.log('needType:'+needType.join('-'));
      // console.log(equip);
      let formData = {
        equipId:equip.equipId,
        allType:needType.join('-'),
        choice: this.props.choice,
        startTime: 'allTime',
        endTime: 'allTime',
        positionId: equip.positionId
      }
      this.props.getCurve(formData)
      this.setState({
        matrixArr: array,
        needType: needType
      })
    } else if (array[i][0].checked == 'true') {
      array[i][0].checked = 'false';
      let needType = [...this.state.needType]
      for (let j = 1; j < array[i].length; j++) {
        if (array[i][j].checked == 'true') {
          array[i][j].checked = 'false';
          needType.splice(needType.indexOf(j+','+array[i][0].line),1)
        }
      }
      let formData = {
        equipId:equip.equipId,
        allType:needType.join('-'),
        choice: this.props.choice,
        startTime: 'allTime',
        endTime: 'allTime',
        positionId: equip.positionId
      }
      this.setState({needType:needType})
      this.props.getCurve(formData)
      this.setState({
        matrixArr: array
      })
      
    } 
  }
  pointClick(i,j) {
    // console.log(this.state.matrixArr[i][j]);
    let array = [...this.state.matrixArr];
    let needType = [...this.state.needType]
    if (array[i][j].checked == 'false') {
      array[i][j].checked = 'true';
      const equip = this.props.equip;
      
      for (let m = 0; m <= i; m++) {
        for (let n = 1; n <= j; n++) {
          if (array[m][n].checked == 'true') {
            needType.push(array[m][n].point)
          }
        }
      }
      if (needType.length !== 0) {
        let formData = {
          equipId:equip.equipId,
          allType:needType.join('-'),
          choice: this.props.choice,
          startTime: 'allTime',
          endTime: 'allTime',
          positionId: equip.positionId
        }
        this.props.getCurve(formData)
      }
    } else if(array[i][j].checked == 'true') {
      array[i][j].checked = 'false'
      needType.splice(needType.indexOf(array[i][j].point),1)
      let formData = {
          equipId:equip.equipId,
          allType:needType?needType:'allType',
          choice: this.props.choice,
          startTime: 'allTime',
          endTime: 'allTime',
          positionId: equip.positionId
        }
      this.props.getCurve(formData)
      //删除point
    }
  }
  getList = () => {
    let list = [];
    for (let i = 0; i < this.state.matrixArr.length; i++) {
      list.push(<Button check={this.state.matrixArr[i][0].checked} line={this.state.matrixArr[i][0].line} style={{width:'50px'}} onClick={() => this.lineClick(i)} >{this.state.matrixArr[i][0].name}</Button>)
      for (let j = 1; j < this.state.matrixArr[i].length; j++) {
        list.push(
          <Button check={this.state.matrixArr[i][j].checked} point={this.state.matrixArr[i][j].point} style={{width:'50px'}} onClick={() => this.pointClick(i,j)}>{this.state.matrixArr[i][j].name}</Button>
        )
      }
    }
    return list;
  }
  
  render() {
    console.log(this.state.matrixArr);
    return (
      <Collapse  ghost>
        <Panel header="设置电极对" key="1" style={{width:'400px'}}>
          {this.getList()}
        </Panel>
      </Collapse>
    );
  }
}
const mapStateToProps = (state) => ({
  equip:state.equipmentPage.equip,
  ltOptionData:state.equipmentPage.ltOptionData,
  rtOptionData:state.equipmentPage.rtOptionData,
  svOptionData:state.equipmentPage.svOptionData,
});
const mapDispatchToProps = dispatch => {
  return {
    getCurve: dispatch.equipmentPage.getCurve,
    setEquip: dispatch.equipmentPage.setState
  }
};

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(withRouter(CollapseCard))